<!--  -->
<template>
  <a-popover
    transitionName=""
    overlayClassName="lookup-popover"
    :autoAdjustOverflow="true"
    :visible="popVisible"
    :destroyTooltipOnHide="true"
  >
  <!-- stop 阻止冒泡  因为外层要有判断 target 不是自身要关闭pop -->
    <span class="pop-content-word" @click.stop="wordClick($event)">
      <template v-if="wordChangeType === 1">
        <span class="word-deleted">
          {{ currWord }}
        </span>
      </template>
      <template v-else-if="wordChangeType === 2 && !!wordChange">
        <span class="word-changed">
          {{ currWord }}
          <span class="word-changed-word">{{ wordChange }}</span>
        </span>
      </template>
      <template v-else-if="wordChangeType === 3 && !!wordChange">
        <span class="word-add">
          {{ currWord }}
          <span class="word-add-word">
            <span class="word-hidden">{{ wordChange }}</span>
          </span>
        </span>
      </template>
      <template v-else>
        {{ currWord }}
      </template>
    </span>
    <div class="read-content" slot="content">
      <template v-if="popType === 0">
        <div class="type-none">
          <span @click="changeType(1)">删除</span>
          <span @click="changeType(2)">修改</span>
          <span @click="changeType(3)">在之前添加</span>
          <span @click="changeType(4)">查词</span>
        </div>
      </template>
      <template v-if="popType === 2">
        <div class="input-content">
          <label class="change-word">
            <span>将{{ currWord }}改为：</span>
            <input
              v-model="changeText"
              @input="inputInputHandle($event)"
              type="text"
            />
          </label>
          <button class="pop-confirm-btn" @click="changeConfirm">确定</button>
        </div>
      </template>
      <template v-if="popType === 3">
        <div class="input-content">
          <label class="change-word">
            <span>在{{ currWord }}之前添加：</span>
            <input v-model="changeText" @input="inputInputHandle($event)" type="text" />
          </label>
          <button class="pop-confirm-btn" @click="changeConfirm">确定</button>
        </div>
      </template>
      <template v-if="popType === 4">
        <div class="lookup-content">
          <div class="title">
            {{ translate.prototype_word || translate.select_word }}
            <img
              v-show="translate.prototype_word"
              class="icon-img"
              @click="translateVoice"
              src="~assets/reverse/audio-play1.png"
              alt=""
            />
          </div>
          <div class="translate">
            {{ translate.translate || "未找到该生词" }}
          </div>
          <div class="btn-group">
            <a :disabled="!translate.prototype_word" @click="addWord"
              ><img
                class="icon-img"
                src="~assets/reverse/add1.png"
                alt=""
              />添加生词</a
            >
            <a @click="translateDetail"
              ><img
                class="icon-img"
                src="~assets/reverse/detail1.png"
                alt=""
              />单词详解</a
            >
          </div>
        </div>
      </template>
      <template v-if="popType === 5">
        <span class="pop-delete" @click="deleteAnswer">删除此答案</span>
      </template>
    </div>
  </a-popover>
</template>

<script>
import { Popover } from "ant-design-vue";
import { checkWord, addWord } from "@/services/reverse";
import { SUCCESS_CODE } from "@/utils/const";
import { mapMutations } from "vuex";
import $ from "jquery";
export default {
  name: "wordMistake",
  components: {
    APopover: Popover,
  },
  data() {
    return {
      BSync: null,
      translate: {},
      popType: 0, // 弹框过度状态
      wordChangeType: 0,
      wordChange: false,
      changeText: "",
      position: 0,
      popVisible: false,
      resultType: 0, // 确认修改状态
    };
  },
  props: {
    index: {
      type: Number,
      default: 0,
    },
    word: {
      type: String,
      default: "",
    },
    curr: {},
    answerResult: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  computed: {
    currWord() {
      return this.word.replace(/@([A-Za-z0-9]+['’]?[A-Za-z0-9]*)@/gi, "$1");
    },
  },
  watch: {
    curr(val) {
      if (val !== this.position) {
        this.popVisible = false;
      }
    },
  },
  methods: {
    ...mapMutations(["setTranslateModal"]),
    wordClick(e) {
      this.$emit('setCurIndex', this.index)
      let el = $(e.srcElement).hasClass("pop-content-word")
        ? $(e.srcElement)
        : $(e.srcElement).closest(".pop-content-word");
      this.popVisible = true;
      this.position = $(".pop-content-word").index(el);
      this.$emit("currIndex", this.position);
      if (this.resultType === 0) {
        this.popType = 0;
      }
    },

    replaceText(currWord) {
      const pattern = /[^a-zA-Z']/g;
      return currWord.replace(pattern, "");
    },
    checkWord(value) {
      checkWord({ word: value }).then((res) => {
        this.translate = res.data;
      });
    },
    addWord() {
      addWord({
        prototype_word: this.translate.prototype_word,
        select_word: this.translate.select_word,
        question_type: 3,
        is_diff: "0",
      }).then((res) => {
        if (res.code === SUCCESS_CODE) {
          this.$message.success("添加生词成功");
        }
      });
    },
    translateVoice() {
      let audio = document.getElementById("reverse-audio");
      audio.src = this.translate.project_voice;
      audio.play();
    },
    translateDetail() {
      this.setTranslateModal({
        visible: true,
        word: this.translate.select_word,
      });
    },
    inputInputHandle(e) {
      let val = e ? e.target.value : $('input').val();
      if (!val) return
      let result = val.replace(/[^A-Za-z0-9'’ ]/g, "");
      this.changeText = result;
    },
    /**
     * type 1 删除， 2 修改 3 添加， 4 查词
     */
    changeType(type) {
      if (type === 4) {
        this.checkWord(this.currWord);
        this.popType = type;
      } else {
        if (type === 1) {
          this.$nextTick(() => {
            if (Object.keys(this.answerResult).length >= 10) {
              this.$message.error("最多修改10处");
              return;
            }
            // 修改 word 状态 和 最终弹框状态
            this.wordChangeType = type;
            this.resultType = type;
            this.$emit("confirmChange", {
              position: this.position,
              type: type,
              right_answer: "",
              now_answer: this.currWord,
            });
            this.popVisible = false;
            this.popType = 5;
          });
        } else if (type === 2) {
          this.popType = type;
        } else if (type === 3) {
          this.popType = type;
        }
      }
    },
    changeConfirm() {
      this.inputInputHandle()
      if (Object.keys(this.answerResult).length >= 10) {
        this.$message.error("最多修改10处");
        return;
      }
      if (!this.changeText.trim()) {
        this.$message.error('请填写内容再确认~')
        return
      }
      if (+this.popType === 2 || +this.popType === 3) {
        console.log(this.changeText);
        this.wordChange = this.changeText;
        this.wordChangeType = this.popType;
      }
      this.resultType = this.popType;
      this.$nextTick(() => {
        this.$emit("confirmChange", {
          position: this.position,
          type: this.popType,
          right_answer: this.wordChange,
          now_answer: this.currWord,
        });
        this.popType = 5;
        this.popVisible = false;
      });
    },
    // visibleChange(val) {
    //   console.log(val, 'asdasd')
    //   if (!val) {
    //     if (this.resultType) {
    //       this.popType = 5
    //     } else {
    //       this.popType = 0
    //     }
    //   }
      // console.log("111111");
    // },
    deleteAnswer() {
      this.popType = 0;
      this.wordChange = "";
      this.wordChangeType = 0;
      this.resultType = 0;
      this.changeText = "";
      this.popVisible = false;
      this.$emit("confirmChange", this.position);
    },
  },
  created() {
  },
  mounted() {},
  beforeCreate() {},
  beforeMount() {},
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
  activated() {},
};
</script>
<style lang="less">
/* @import url(); 引入公共css类 */
body {
  .lookup-popover {
    .type-none {
      color: #fff;
      width: 320px;
      & > span {
        display: inline-block;
        padding: 0 20px;
        border-right: 1px solid #3f9687;
        cursor: pointer;
        &:nth-last-child(1) {
          border: none;
        }
      }
    }
    .input-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      min-width: 360px;
    }
    .change-word {
      display: flex;
      justify-content: flex-start;
      color: #afafaf;
      background-color: #fff;
      padding: 10px;
      input {
        color: #333;
        font-weight: 700;
        overflow: hidden;
      }
    }
    .pop-confirm-btn {
      width: 55px;
      min-width: 55px;
      height: 32px;
      background-color: #3eb29d;
      border: none;
      outline: none;
      border-radius: 6px;
      color: #fff;
      margin-left: 10px;
      cursor: pointer;
    }
    .pop-delete {
      cursor: pointer;
      color: #fff;
    }
  }
}
.pop-content-word {
  font-size: 24px;
  .word-changing {
    font-weight: 700;
    position: relative;
    border-bottom: 4px solid #ff9d00;
  }
  .word-changed {
    font-weight: 700;
    position: relative;
    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 32px;
      height: 4px;
      width: 100%;
      background-color: #ff9d00;
    }

    .word-changed-word {
      position: absolute;
      font-size: 16px;
      bottom: -26px;
      left: 0;
      left: 50%;
      transform: translateX(-50%);
      text-align: center;
      line-height: normal;
      color: #ff9d00;
      max-width: 16em;
      text-overflow: ellipsis;
      overflow-x: hidden;
    }
  }
  .word-deleted {
    position: relative;
    font-weight: 700;

    &::after {
      content: "";
      position: absolute;
      left: 0;
      top: 50%;
      height: 4px;
      width: 100%;
      background-color: #ff9d00;
    }
  }
  .word-add {
    position: relative;
    font-weight: 700;
    .word-add-word {
      white-space: nowrap;
      position: absolute;
      left: 0;
      transform: translateX(-50%);
      top: 38px;
      text-align: center;
      color: #ff9d00;
      font-size: 16px;
      line-height: normal;
      &::before {
        content: "";
        position: absolute;
        top: -3px;
        left: 50%;
        width: 16px;
        height: 16px;
        border: 4px solid #ff9d00;
        border-color: #ff9d00 transparent transparent #ff9d00;
        transform: rotate(45deg) translate(-10px, 5px);
      }
    }
  }
  .word-hidden {
    display: inline-block;
    max-width: 16em;
    text-overflow: ellipsis;
    overflow-x: hidden;
  }
}
</style>
